<template>
  <!--课程章节-->
  <div class="showCs">
    <!--课程简介-->
    <div class="course-introduction course-warp">
      简介：<span>{{course.introduction}}</span>
    </div>
    <!--课程简介END-->
    <div class="chapter course-warp" v-for="item in courseData" :key="item.chapterId">
      <h3>第{{item.sort}}章 {{item.name}}</h3>
      <div class="chapter-introduction">
        {{item.introduction}}
      </div>
      <div class="sections">
        <div v-for="sitem in item.children" class="section-div" :key="sitem.sectionId" @click="learnFun(sitem.sectionId)" @mouseenter="onMouseOver(sitem.sectionId)" @mouseleave="onMouseLeave(sitem.sectionId)">
          <i class="el-icon-video-play section-div-play" style="display: inline-block"></i><span> {{sitem.name}}</span>
          <div class="rightNotice" v-if="isStudy">
            <!--最后学习-->
            <div class="showDiv"  v-if="sitem.state == 0">
              <span style="font-size: 12px;color: rgba(128, 128, 128, 0.6);margin-right: 5px">最近学习</span>
              <i class="el-icon-time" style="color: #67C23A;font-weight: bolder"></i>
            </div>
            <!--学习部分-->
            <div class="showDiv" v-if="sitem.state == 1" >
              <i class="el-icon-s-help" style="color: #00b43c"></i>
            </div>
            <!--已学完-->
            <div class="showDiv"  v-if="sitem.state == 2" >
              <i class="el-icon-success" style="color: #00b43c;font-weight: bolder"></i>
            </div>
            <!--未学习-->
            <div class="showDiv"  v-if="sitem.state == 3" >
              <i class="el-icon-aim" style="color: #d9dde1;"></i>
            </div>
          </div>
          <el-button class="learnBtn" style="display: none" v-if="!isStudy" :id="sitem.sectionId" size="mini" round>开始学习</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'CourseCs',
  props: ['courseId', 'isStudy'],
  data () {
    return {
      courseData: '',
      course: ''
    }
  },
  mounted () {
    this.getCourseById()
    this.getCourseCS()
  },
  computed: mapState({
    user: 'user'
  }),
  methods: {
    getCourseCS () {
      var _this = this
      this.$axios.post('/api/course/getCourseCsByUser',
        this.$qs.stringify({
          'courseId': _this.courseId,
          'userId': _this.user.userId
        }))
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.courseData = JSON.parse(JSON.stringify(data.result))
          }
        })
    },
    getCourseById () {
      var _this = this
      this.$axios.post('/api/course/getCourseById',
        this.$qs.stringify({
          'courseId': _this.courseId
        }))
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.course = JSON.parse(JSON.stringify(data.result))
          }
        })
    },
    onMouseOver (sectionId) {
      if (!this.isStudy) {
        document.getElementById(sectionId).style.display = 'block'
      }
    },
    onMouseLeave (sectionId) {
      if (!this.isStudy) {
        document.getElementById(sectionId).style.display = 'none'
      }
    },
    learnFun (sectionId) {
      var _this = this
      // studySection 操作 ★★★★★★★★★
      this.$axios.post('/api/studied/studySection',
        this.$qs.stringify({
          courseId: this.courseId,
          sectionId: sectionId,
          userId: this.user.userId
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.$router.push(
            {path: '/video',
              query: {
                sectionId: sectionId,
                courseId: _this.courseId,
                path: _this.$route.fullPath
              }
            }
          )
        }
      })
    }
  }
}
</script>

<style>
  .hiddenDiv{
    display: none;
  }
  .showCs {
  }
  .section-div{
    cursor: pointer;
  }
  .section-div:hover {
    background-color: rgba(0,255,0,0.2);
  }
 .showCs .course-introduction {
   line-height: 25px;
   text-align: left;
   font-size: 14px;
 }
 .showCs .course-warp {
   margin-bottom: 8px;
   padding: 24px 32px 32px;
   background: #fff;
   box-shadow: 0 8px 16px 0 rgba(7, 17, 27, .1);
   border-radius: 12px;
 }
  .chapter {
    text-align: left;
  }
  .chapter h3{
    color: #1c1f21;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    margin: 0px;
  }
  .chapter .chapter-introduction {
    margin-top: 2px;
    font-size: 12px;
    color: #545c63;
    line-height: 18px;
  }
  .sections {
    padding-top: 20px;
  }
  .sections .section-div{
    padding-left: 12px;
    height: 48px;
    line-height: 48px;
    list-style: none;
  }
  .section-div-play {
    font-weight: bolder;
  }
  .learnBtn{
    float: right;
    margin: 10px;
  }
  .rightNotice {
    font-size: 14px;
    float: right;
    margin: 10px;
  }
  .rightNotice .showDiv{
    height: 28px;
    line-height: 28px;
  }
</style>
